<template>
  <van-nav-bar title="订单详情" left-arrow @click-left="onBack" />

  <div class="near-box">
    <div class="jd-qrdd-bigbox">
      <!--商品地址管理部分-->
      <!-- <div class="indent-details-box">
              <span class="indent-details-img1"></span>
              <span class="indent-details-text1"></span>
              <span class="indent-details-text2">物流信息：客户签收人：邮件收发 已签收 感谢使用圆通快递，期待再次为您服务！</span>
              <span class="indent-details-text3">2017-10-23 12:25:12</span>
          </div> -->
      <!--地址部分-->
      <div class="jd-qrdd-a1">
        <span class="qrdd-a1-t1">{{ info.address.consignee }}</span>
        <span class="qrdd-a1-t1">{{ info.address.mobile }}</span>
        <span class="qrdd-a1-t2" v-if="info.address.status == 1">默认</span>
        <div class="qrdd-a1-b1">
          <span class="qrdd-a1-img1"></span>
          <span class="qrdd-a1-t3">{{ info.address.region_text }} {{ info.address.address }}</span>
        </div>
        <span class="qrdd-a1-img2"></span>
      </div>
      <!--商品部分-->
      <div class="zjzz-buylist-goods1">
        <div class="zjzz-buylist-gtime">
          <!-- <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>保洁官方旗舰店</span> -->
          <span class="zjzz-buylist-gtime2">{{ info.order.status_text }}</span>
        </div>
        <div class="zjzz-buylist-det" v-for="item of info.product" :key="item.id">
          <img :src="item.products.cover_cdn" />
          <div class="zjzz-buylist-gdetail">
            <span class="zjzz-buylist-gtit1">{{ item.products.name }}</span>
            <span class="zjzz-buylist-gmoney">
              <i class="zjzz-buylist-gm1">￥ {{ item.total }}</i>
              <i class="zjzz-buylist-gm2">x{{ item.pronum }}</i>
            </span>
          </div>
        </div>
        <div class="zjzz-buylist-btn">
          <a class="zjzz-buylist-btn3">申请售后</a>
        </div>
      </div>
      <!--商品金额部分-->
      <div class="indent-details-box2">
        <span class="indent-details-text4">应付总额</span>
        <span class="indent-details-text5">￥{{ info.order.amount }}</span>
      </div>
      <div class="indent-details-box2">
        <span class="indent-details-text4 tcolor-grey">商品总价</span>
        <span class="indent-details-text5 tcolor-black">￥{{ info.order.amount }}</span>
      </div>
      <!-- <div class="indent-details-box2">
              <span class="indent-details-text4 tcolor-grey">运费</span>
              <span class="indent-details-text5 tcolor-black">￥0.00</span>
          </div>
          <div class="indent-details-box2">
              <span class="indent-details-text4 tcolor-grey">税费</span>
              <span class="indent-details-text5 tcolor-black">￥0.00</span>
          </div>
          <div class="indent-details-box2">
              <span class="indent-details-text4 tcolor-grey">发票信息</span>
              <span class="indent-details-text5 tcolor-black">不需要发票</span>
          </div> -->
      <!--订单编号部分-->
      <div class="indent-details-box3">
        <p>订单编号:{{ info.order.code }}</p>
        <!-- <p>支付方式:支付宝</p>
              <p>支付交易单号:201711024866544846144</p> -->
        <p>下单时间:{{ info.order.createtime_text }}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import { showNotify } from 'vant'
  export default {
    data() {
      return {
        orderid: 0,
        info: {
          order: {},
          address: {},
          product: [],
        },
      }
    },
    created() {
      this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0

      this.getOrderInfo()
    },
    methods: {
      onBack() {
        this.$router.go(-1)
      },
      async getOrderInfo() {
        let data = {
          orderid: this.orderid,
        }

        let result = await this.$api.OrderInfo(data)

        if (result.code === 0) {
          showNotify({
            type: 'warning',
            message: result.msg,
            onClose: () => {
              this.$router.go(-1)
            },
          })

          return false
        }

        this.info = result.data

        console.log(this.info.product)
      },
    },
  }
</script>

<style>
  @import url('/assets/css/indent-details.css');
</style>
